<template>
  <div class="page-wrap">
    <div class="top-wrap">
      车间
      <Gap />
      <el-select :popper-append-to-body="false" v-model="currentWorkshop" placeholder="请选择车间">
        <el-option v-for="item in workshops" :key="item" :label="item" :value="item" />
      </el-select>
      <Gap />
      机台
      <Gap />
      <el-select :popper-append-to-body="false" v-model="currentMac" placeholder="请选择机台">
        <el-option v-for="item in macLis" :key="item" :label="item" :value="item" />
      </el-select>
      <Gap />
      <el-radio-group v-model="currentSide">
        <el-radio-button label="左边" />
        <el-radio-button label="右边" />
      </el-radio-group>
      <Gap />
      <div>参考速度：{{ macBaseInfo[currentMac] ? macBaseInfo[currentMac].RefSpeed : '-' }}</div>
    </div>
    <div class="top-wrap" style="margin-top: 20px">
      <el-badge :value="statusList[0]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[0]">断头</div>
      </el-badge>
      <GapX />
      <el-badge :value="statusList[1]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[1]">掉线</div>
      </el-badge>
      <GapX />
      <el-badge :value="statusList[2]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[2]">空闲锭</div>
      </el-badge>
      <GapX />
      <el-badge :value="statusList[3]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[3]">弱捻</div>
      </el-badge>
      <GapX />
      <el-badge :value="statusList[4]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[4]">严重弱捻</div>
      </el-badge>

      <GapX />
      <el-badge :value="statusList[5]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[5]">锭子故障</div>
      </el-badge>
      <GapX />
      <el-badge :value="statusList[6]" class="item" type="primary">
        <div class="badge-content" :style="stateStyle[6]">正常运行</div>
      </el-badge>
      <!-- {{ JSON.stringify(statusList) }} -->
    </div>
    <div class="spin-status">
      <div class="spin-list-row" style="border-bottom: 1px solid #eee">
        <div class="spin-list-col" style="border-right: 1px solid #eee">
          <div class="spin-list-title">{{ currentSide }}</div>
        </div>
        <div class="spin-list-col" style="border-right: 1px solid #eee" v-for="col in 24" :key="'inx' + col">
          <div class="spin-list-title">{{ col | twoNum }}</div>
        </div>
      </div>
      <template v-for="row in 10">
        <div class="spin-list-row" :key="'spinrow' + row">
          <div class="spin-list-col" style="border-right: 1px solid #eee; border-bottom: 1px solid #eee">
            <!-- <div class="spin-list-title">{{ ((row - 1) * 24) | thrNum }}-{{ row }}</div> -->
            <div class="spin-list-title">{{ row }}</div>
          </div>
          <div class="spin-list-col" v-for="col in 24" :key="'spincol' + col">
            <template v-if="spinInfo(row, col).tips">
              <el-tooltip :content="spinInfo(row, col).tips" placement="top" effect="light" :open-delay="300">
                <div class="spin-list-item" :style="stateStyle[spinInfo(row, col)['SpinState']]">
                  <!-- SpinSpeed, SpinState, SpinVol -->
                  <span>{{ spinInfo(row, col)['SpinSpeed'] }}</span>
                </div>
              </el-tooltip>
            </template>
            <div v-else class="spin-list-item"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import BlockTitle from '@/components/BlockTitle/index.vue'
var showlog = true

export default {
  name: 'Spindle',
  components: {
    BlockTitle,
    Gap: {
      template: `<div style="width:10px"></div>`,
    },
    GapX: {
      template: `<div style="width:20px"></div>`,
    },
  },
  filters: {
    twoNum(e) {
      return (e < 10 ? '0' : '') + e
    },
    thrNum(e) {
      return ('000' + e).slice(-3)
    },
  },
  data() {
    return {
      workshops: ['车间1', '车间2', '车间3'],
      // 0-断头（红灯常亮）
      // 1-掉线（红灯快闪）
      // 2-闲置（红灯慢闪）
      // 3-弱捻（绿灯常亮）
      // 4-严重弱捻（绿灯快闪）
      // 5-锭子故障（绿灯慢闪）
      // 6-正常运行（灭灯）
      stateColor: ['#FFF', '#FFF', '#FFF', '#333', '#FFF', '#FFF', '#FFF', '#FFF'],
      stateBgColor: ['#FF5722', '#9E9E9E', '#009688', '#FFEB3B', '#d67cb7', '#446fb7', '#4CAF50', '#EFEFEF'],
      macLis: [],
      macDetail: {},
      macBaseInfo: {},
      currentSide: '左边',
      currentMac: '',
      currentWorkshop: '',
    }
  },
  computed: {
    stateStyle() {
      const _style = []
      for (let inx in this.stateColor) {
        _style.push({ background: this.stateBgColor[inx], color: this.stateColor[inx] })
      }
      return _style
    },
    currentSideId() {
      return this.currentSide == '左边' ? 'Left' : 'Right'
    },
    statusList() {
      if (this.macDetail && this.macDetail[this.currentMac] && this.macDetail[this.currentMac][this.currentSideId]) {
        return this.macDetail[this.currentMac][this.currentSideId].reduce(
          (pre, cur) => {
            pre[parseInt(cur.SpinState)] += 1
            return pre
          },
          [0, 0, 0, 0, 0, 0, 0]
        )
      } else {
        return [0, 0, 0, 0, 0, 0, 0]
      }
    },
  },
  created() {},
  mounted() {
    this.$EVBUS.$on('Spindle', (data) => {
      showlog && console.log(`Spindle eventbus on:`, data)
      const { id, Side, SpinStartAddr, SpinNumber } = data

      if (this.macLis.indexOf(id) == -1) {
        this.macLis.push(id)
        if (this.macLis.length == 1) this.currentMac = id
      }

      if (!this.macDetail[id]) this.macDetail[id] = {}
      if (!this.macDetail[id][Side]) this.macDetail[id][Side] = []

      const dataOfSide = this.macDetail[id][Side]

      const { SpinSpeed: SpinSpeedLis, SpinState: SpinStateLis, SpinVol: SpinVolLis } = data

      for (let x = SpinStartAddr; x < SpinStartAddr + SpinNumber; x++) {
        if (!dataOfSide[x]) dataOfSide[x] = { SpinSpeed: 0, SpinState: 0 }
        dataOfSide[x]['SpinSpeed'] = SpinSpeedLis[x]
        dataOfSide[x]['SpinState'] = SpinStateLis[x]
        dataOfSide[x]['SpinVol'] = SpinVolLis[x]
      }
      showlog && console.log('dataOfSide', dataOfSide.length)
      this.$forceUpdate()
    })

    this.$EVBUS.$on('MachineStatus', (data) => {
      console.log('MachineStatus', data)
      const { id } = data
      this.macBaseInfo[id] = data
    })
  },
  methods: {
    spinInfo(row, col) {
      showlog && console.log('row, col', row, col)

      const { currentMac: mid, currentSideId: sid } = this
      showlog && console.log('  this.macDetail[mid]', this.macDetail[mid])

      const inx = (row - 1) * 24 + col - 1
      if (this.macDetail[mid] && this.macDetail[mid][sid] && this.macDetail[mid][sid][inx]) {
        const { SpinSpeed, SpinState, SpinVol } = this.macDetail[mid][sid][inx]
        // showlog && console.log(this.macDetail[mid][sid][inx])
        return {
          SpinSpeed,
          SpinState,
          SpinVol,
          tips: `${Math.ceil((inx + 1) / 24)}-${inx + 1}-${['断头', '掉线', '闲置', '弱捻', '严重弱捻', '故障', '正常'][SpinState]}-${(
            SpinVol * 0.1
          ).toFixed(1)}V`,
        }
      } else {
        return {}
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.top-wrap {
  display: flex;
  align-items: center;
}
.spin-status {
  margin-top: 10px;
  height: calc(100vh - 200px);
  border: 1px solid #eee;
}
.spin-list-row {
  // border-left: 1px solid #eee;
  // border-right: 1px solid #eee;
  display: flex;
}
.spin-list-col {
  width: 4%;
  height: 40px;
  padding: 4px;
  box-sizing: border-box;
}
.spin-list-item {
  color: #333;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.spin-list-title {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  letter-spacing: 1px;
}
::v-deep .el-select .el-select-dropdown .el-scrollbar {
  padding-bottom: 15px !important;
}

.badge-content {
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 3px;
  // border: 1px solid #bbb;
  display: inline-block;
  overflow: visible;
  color: #666;
}
</style>
